<template>
  <div class="price-wrapper"  v-title data-title="六个轮子 | 华为Mate 10骑车拿，还有500现金等你领！">
    <transition name="fade-in">
      <div class="content">
        <div class="thumbnail">
          <img src="../styles/asset/winphone/winmate10_02.png" />
        </div>
        <div class="thumbnail">
          <img src="../styles/asset/winphone/winmate10_03.png" />
        </div>
        <div class="thumbnail">
          <div class="count-box">
            <div class="count-main">
              <p class="time-limit">您已累计骑行</p>
              <div class="count-img">
                <img src="../styles/asset/winphone/count-box.png" alt="">
                <p class="num">{{spell}}<span>{{rideCnt}}</span></p>
              </div>
              <p class="surpass" v-show="show">超过<span class="red">{{overPercent}}</span>的用户<br/><span class="red">99元骑行礼品</span><span class="black">已到手</span><br>骑行次数越多，距离大奖越近</p>
              <p class="backward" v-show="!show">距离领取<span class="red">99元骑行礼品</span><br/><span class="black">只差</span><span class="red-high">{{lessTimes}}</span><span class="black">次</span><br/>每天多骑2次，好礼马上到手！</p>
            </div>
          </div>
        </div>
        <div class="thumbnail">
          <img src="../styles/asset/winphone/winmate10_04.png" />
        </div>
        <div class="thumbnail">
          <img src="../styles/asset/winphone/winmate10_05.png" />
        </div>
      </div>
    </transition>
    <simplert ref="simplert"></simplert>
  </div>
</template>

<script type="text/ecmascript-6">
  import Simplert from '../../components/dialog/dialog.vue'
  export default {
    data() {
      return {
        img: require('../styles/asset/share.jpg'),
        show:false,
        token:"",
        rideCnt:'', // 骑行次数
        overPercent:'', // overPercent:''
        lessTimes:'', //离领取奖励还差多少次,
        spell:''
      }
    },
    mounted() {
      const that = this;
      let root = process.env.MAIN_ROOT;
      let url = window.location.href;
      this.$util.sendShareMessage("六个轮子 | 华为Mate 10骑车拿，还有500现金等你领！","来~骑~车~呀~", root+this.img,url);

      this.$util.getUserToken().then(token=>{
        that.token = token;
        that.getSuiteId();
      })

    },
    components: {
      Simplert
    },
    methods: {
      open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose,message) {
        let obj = {
          title: title,
          useConfirmBtn: confirmBtn,
          customConfirmBtnText: customConfirmBtnText,
          onConfirm:onConfirm,
          type: type,
          onClose:onClose,
          message:message
        }
        this.$refs.simplert.openSimplert(obj)
      },
      getSuiteId(){
        let that = this;
        that.$api.get('/userAccount/v1/authApi/rideReward?startTime=2017-11-18&endTime=2017-12-18&token='+ this.token,{},s=>{
            let e=s.module;
            if(e.lessTimes==0){
              that.show=true;
            }else{
              that.show=false;
            }
            let num=e.rideCnt;
            if(num<10){
              that.spell = '000';
            }else if(num>10&&num<100){
              that.spell = '00';
            }else if(num>100&&num<1000){
              that.spell = '0';
            }else{
              that.spell = '' ;
            }
            that.rideCnt=e.rideCnt;
            that.overPercent = e.overPercent;
            that.lessTimes = e.lessTimes;
        },f=>{
          that.open('信息获取失败',false,'','','fade_alert',function(){
              that.rideCnt = '' ;
              that.spell = '0000' ;
              that.lessTimes = 'n';
          });
        },{
          "token": that.token
        })
      },
     }

  }
</script>

<style scoped>
  @import "../styles/styles.css";
  .price-wrapper {
    width: 100%;
  }
  .content{ overflow: scroll; width: 100%; }
  .thumbnail{ padding: 0; margin: 0; overflow: hidden;}
  .thumbnail>img{ width: 100%;}
  .count-box{
    width: 100%;
    height:3.44rem;
    background: #fe4310;
  }
  .count-main{
    overflow: hidden;
    width: 6.70rem;
    height:100%;
    margin:0 auto;
    background: #fff;
    border-radius:0.5rem 0.5rem 0 0;
  }
  .time-limit{
    margin-top:0.37rem;
    text-align: center;
    font:0.3rem/0.3rem "Microsoft YaHei";
    font-weight: 600;
    color:#666;
  }
  .count-img{
    position: relative;
    width: 3.89rem;
    height:1.48rem;
    margin:0 auto;
  }
  .count-img img{
    width: 100%;
    height:100%;
  }
  .count-img p{
    position: absolute;
    left:0.55rem;
    top:0.48rem;
    letter-spacing:0.29rem;
    display: inline-block;
    font:0.6rem/0.6rem "Arial";
  }
  .num{
    color:#999;
  }
  .num span{
    color:#ff4310;
  }
  .surpass{
    margin-top:-0.1rem;
    text-align: center;
    font:0.26rem/0.4rem "microsoft YaHei";
    color:#ff5530;
  }
  .backward{
    letter-spacing:0.02rem;
    margin-top:-0.1rem;
    text-align: center;
    font:0.26rem/0.4rem "microsoft YaHei";
    color:#666;
  }
  .backward .red{
    color:#ff5d2e;
  }
  .backward .black{
    color:#000;
  }
  .backward .red-high{
    color:#ff5d2e;
    letter-spacing:0rem;
    text-decoration: underline;
  }
</style>
